<template>
	<view class="">
		<view class="content2">
			<view class="cz" @click="reset()">
				重置
			</view>
		</view>
		<view class="">
			<view class="lmbh">
				路面病害
			</view>
			<view class="content1">
				<!-- <view class="mybtn">
					<view class="begin" @click="clear()">
						清空
					</view>
					<view class="begins" @click="repairRiskToPlats()">
						修复
					</view>
				</view> -->
				<view class="num" v-for="item in num" :key="item.id">
					<view class="it">
						{{item.sort}}
						<view class="submit" @click="submit(item)">
							提交
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="">
			<view class="qlh">
				轻量化
			</view>
			<view class="content2">
				<view class="begin" @click="begin()">
					开始
				</view>
				<view class="end" @click="pause()">
					暂停
				</view>

				<view class="restart" @click="editThreeStatuss()">
					网页
				</view>
				<!-- jcdzStatus: 0,
				kxjcStatus: 0 -->
				<view class="ss" @click="video()">
					视频
				</view>
				<view class="videos" @click="refresh()">
					刷新
				</view>
				<view class="phone" @click="phone()">
					电话
				</view>
			</view>
		</view>
		<view>
			<view class="lmbh">
				基础底座
			</view>
			<view class="content2">
				<view class="restart" @click="jcdzWy()">
					网页
				</view>
				<view class="video" @click="jcdzVideo()">
					视频
				</view>

			</view>
		</view>
		<view class="kxjc">
			<view class="lmbh">
				科学决策
			</view>
			<view class="content2">
				<view class="restart" @click="kxjcWy(0)">
					视频
				</view>
				<view class="video" @click="kxjcWy(1)">
					巡查清单
				</view>
				<view class="charts" @click="kxjcWy(2)">
					pci列表
				</view>
				<view class="charts" @click="kxjcWy(3)">
					决策结果
				</view>
				<view class="charts" @click="kxjcWy(4)">
					修复后柱状图
				</view>
			</view>
			<!-- <view class="content3">
				<view class="num" v-for="item in kxjcNum" :key="item.id">
					<view class="its">
						{{item.name}}
						<view class="submit1" @click="kxjcSubmit(item)">
							修复
						</view>
					</view>

				</view>
			</view> -->
		</view>

		<uni-popup ref="popup" type="message">
			<uni-popup-message type="success" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		dogStatusUpdate,
		expoReset,
		getRiskListFromCache,
		resetRiskListCache,
		sendRiskToPlat,
		repairPci,
		getVideoList,
		editVideoStatus,
		editThreeStatus,
		editRoadNo,
		resetAll
	} from '@/api/control.js'
	export default {
		data() {
			return {
				num: [],
				messageText: '',
				kxjcNum: []
			}
		},
		onLoad() {
			this.getRiskListFromCaches()
			this.getVideoLists()
		},
		onPullDownRefresh() {
			this.getRiskListFromCaches()
			this.getVideoLists()
		},
		methods: {
			repairRiskToPlats() {
				repairPci().then(res => {
					if (res.code == 1000) {
						this.$refs.popup.open()
						this.messageText = '已修复'
						this.getRiskListFromCaches()
					}
				})
			},
			// 科学角色列表
			getVideoLists() {
				getVideoList().then(res => {
					console.log(res, 'res');
					this.kxjcNum = res.data
				})
			},
			clear() {
				resetRiskListCache().then(res => {
					if (res.code == 1000) {
						this.$refs.popup.open()
						this.messageText = '已全部清除'
						this.getRiskListFromCaches()
					}
				})
			},
			getRiskListFromCaches() {
				getRiskListFromCache().then(res => {
					this.num = res.data
					uni.stopPullDownRefresh();
				})
			},
			submit(item) {
				let params = {
					id: item.id
				}
				sendRiskToPlat(params).then(res => {
					if (res.code == 1000) {
						this.getRiskListFromCaches()
					}
				})
			},
			begin() {
				let params = {
					status: 1
				}
				dogStatusUpdate(params).then(res => {
					if (res.code == 1000) {
						this.$refs.popup.open()
						this.messageText = '已开始'
						console.log(res.data, '路线编码');
						let dd = {
							roadNo: res.data
						}
						editRoadNo(dd).then(res => {
							console.log(res, '变');
						})
						let data = {
							kxjcStatus: 1,
							pdtsStatus: 1,
							jcdzStatus: 2,
						}
						editThreeStatus(data).then(res => {
							console.log(res, '111');

						})

					}
				})
			},
			// 轻量化
			editThreeStatuss() {
				let data = {
					pdtsStatus: 1,
				}
				editThreeStatus(data).then(res => {
					console.log(res, '111');
					this.$refs.popup.open()
					this.messageText = '已切换'
				})
			},
			video() {
				let data = {
					pdtsStatus: 0,

				}
				editThreeStatus(data).then(res => {
					console.log(res, '111');
					this.$refs.popup.open()
					this.messageText = '已切换'
				})
			},
			// 刷新
			refresh() {
				let data = {
					pdtsStatus: 2,
				}
				editThreeStatus(data).then(res => {
					this.$refs.popup.open()
					this.messageText = '已刷新'
				})
			},
			// 电话视频
			phone() {
				let data = {
					status: 1,
				}
				editVideoStatus(data).then(res => {
					if (res.code == 1000) {
						this.$refs.popup.open()
						this.messageText = '已播放'
					}
				})
			},

			// 科学决策
			kxjcWy(status) {
				let data = {
					kxjcStatus: status,
				}
				editThreeStatus(data).then(res => {
					console.log(res, '111');
					this.$refs.popup.open()
					this.messageText = '已切换'
				})
			},
			kxjcVideo() {
				let data = {
					kxjcStatus: 0,
				}
				editThreeStatus(data).then(res => {
					console.log(res, '111');
					this.$refs.popup.open()
					this.messageText = '已切换'
				})
			},
			// 基础底座
			jcdzWy() {
				let data = {
					jcdzStatus: 1,
				}
				editThreeStatus(data).then(res => {
					console.log(res, '111');
					this.$refs.popup.open()
					this.messageText = '已切换'
				})
			},
			jcdzVideo() {
				let data = {
					jcdzStatus: 0,
				}
				editThreeStatus(data).then(res => {
					console.log(res, '111');
					this.$refs.popup.open()
					this.messageText = '已切换'
				})
			},
			pause() {
				let params = {
					status: 0
				}
				dogStatusUpdate(params).then(res => {
					if (res.code == 1000) {
						this.$refs.popup.open()
						this.messageText = '已暂停'
					}
				})
			},
			reset() {
				expoReset().then(res => {
					if (res.code == 1000) {
						this.$refs.popup.open()
						this.messageText = '重置成功'
						let data = {
							jcdzStatus: 1,
						}
						editThreeStatus(data).then(res => {
							console.log(res, '111');
						})
					}
				})
				resetAll().then(res => {
					console.log(res, '重置');
					if (res.code == 1000) {
						this.getRiskListFromCaches()
					}
				})
			}
		}
	}
</script>

<style>
	.kxjc {
		padding-bottom: 40px;
	}

	.mybtn {
		display: flex;
	}

	.lmbh {
		padding-left: 20px;
		padding-top: 20px;
		padding-bottom: 10px;
	}

	.content1 {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.content3 {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-bottom: 20px;
	}

	.num {
		display: flex;
		padding-top: 10px;
	}

	.it {
		background-color: #eee;
		width: 260px;
		text-align: center;
		height: 40px;
		line-height: 40px;
		display: flex;
		padding-left: 10px;
		border-radius: 10px;
		justify-content: space-around;
	}

	.its {
		/* background-color: #eee; */
		width: 360px;
		text-align: center;
		height: 40px;
		line-height: 40px;
		display: flex;
		padding-left: 10px;
		justify-content: space-between;
	}

	.qlh {
		padding-left: 20px;
		padding-top: 40px;
		padding-bottom: 20px;
	}

	.content2 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit {
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 50%;
		background-color: #409eff;
		border: none;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s;
		text-align: center;
	}

	.submit1 {
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 50%;
		background-color: #67c23a;
		border: none;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s;
		text-align: center;
	}

	.begin {
		width: 50px;
		height: 50px;
		line-height: 50px;
		border-radius: 50%;
		background-color: #409eff;
		border: none;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s;
		text-align: center;
		margin-right: 5px;
	}

	.begins {
		width: 50px;
		height: 50px;
		line-height: 50px;
		border-radius: 50%;
		background-color: #67c23a;
		border: none;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s;
		text-align: center;
		margin-left: 10px;
	}

	.end {
		width: 50px;
		height: 50px;
		line-height: 50px;
		border-radius: 50%;
		background-color: #f56c6c;
		border: none;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s;
		text-align: center;
		margin-left: 5px;
		margin-right: 5px;
	}

	.cz {
		width: 50px;
		height: 50px;
		line-height: 50px;
		border-radius: 50%;
		background-color: #e6a23c;
		border: none;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s;
		text-align: center;
		margin: 10px;

	}

	.ends {
		width: 50px;
		height: 50px;
		line-height: 50px;
		border-radius: 50%;
		background-color: #e6a23c;
		border: none;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s;
		text-align: center;
		margin-left: 5px;
		margin-right: 5px;
	}

	.restart {
		width: 50px;
		height: 50px;
		line-height: 50px;
		border-radius: 50%;
		background-color: #67c23a;
		color: #fff;
		border: none;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s;
		text-align: center;
		margin-left: 5px;
		margin-right: 10px;
	}

	.ss {
		width: 50px;
		height: 50px;
		line-height: 50px;
		border-radius: 50%;
		background-color: #aa0000;
		color: #fff;
		border: none;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s;
		text-align: center;
		margin-left: 0px;
		margin-right: 5px;
	}

	.video {
		width: 50px;
		height: 50px;
		line-height: 50px;
		border-radius: 50%;
		background-color: #aa0000;
		color: #fff;
		border: none;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s;
		text-align: center;
		margin-right: 5px;
	}

	.videos {
		width: 50px;
		height: 50px;
		line-height: 50px;
		border-radius: 50%;
		background-color: #aaaaff;
		color: #fff;
		border: none;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s;
		text-align: center;
		margin-right: 5px;
	}

	.phone {
		width: 50px;
		height: 50px;
		line-height: 50px;
		border-radius: 50%;
		background-color: #55aa00;
		color: #fff;
		border: none;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s;
		text-align: center;
		margin-right: 5px;
	}

	.charts {
		width: 50px;
		height: 50px;
		line-height: 50px;
		border-radius: 50%;
		background-color: #08aaaa;
		color: #fff;
		border: none;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s;
		text-align: center;
		margin-left: 10px;
	}
</style>